<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Bootstrap Dashboard by Bootstrapious.com</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Google fonts - Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <!-- Choices CSS-->
    <link rel="stylesheet" href="../vendor/choices.js/public/assets/styles/choices.min.css">
    <!-- Custom Scrollbar-->
    <link rel="stylesheet" href="../vendor/overlayscrollbars/css/OverlayScrollbars.min.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="../css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="../css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="../img/favicon.ico">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  </head>
  <body>
  <!--    页内导航-->
  <div class="bg-gray-200 text-sm">
    <div class="container-fluid">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0 py-3">
          <li class="breadcrumb-item"><a class="fw-light" href="admin/index.html">Home</a></li>
          <li class="breadcrumb-item active fw-light" aria-current="page">统计数据</li>
        </ol>
      </nav>
    </div>
  </div>
  <!--页内导航 end-->

  <div class="container-fluid">
    <div class="row">
      <div class="col-6">
        <div class="card">
          <div class="card-header border-bottom">
            <h4>日订单数</h4>
          </div>
          <div class="card-body">
            <div class="chart-container">
              <div id="echars-day-orders"  style=" height: 346px; width: 612px;" ></div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-6">
        <div class="card">
          <div class="card-header border-bottom">
            <h4>注册用户数据</h4>
          </div>
          <div class="card-body">
            <div class="chart-container">
              <div id="echars-users"  style=" height: 346px; width: 612px;" ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-6">
      <div class="card">
        <div class="card-header border-bottom">
          <h4>各类图书销售比</h4>
        </div>
        <div class="card-body">
          <div class="chart-container">
            <div id="echars-books"  style=" height: 366px; width: 612px;" ></div>
          </div>
        </div>
      </div>
    </div>
      <div class="col-6">
        <div class="card">
          <div class="card-header border-bottom">
            <h4>各类图书收藏比</h4>
          </div>
          <div class="card-body">
            <div class="chart-container">
              <div id="echars-collectBooks"  style=" height: 366px; width: 612px;" ></div>
            </div>
          </div>
        </div>
      </div>


    </div>
  </div>



    <!-- JavaScript files-->
    <script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../vendor/echarts/echarts.min.js"></script>
    <script src="../vendor/just-validate/js/just-validate.min.js"></script>
    <script src="../vendor/overlayscrollbars/js/OverlayScrollbars.min.js"></script>
    <!-- Main File-->
    <script src="../js/front.js"></script>
    <script>
      // ------------------------------------------------------- //
      //   Inject SVG Sprite - 
      //   see more here 
      //   https://css-tricks.com/ajaxing-svg-sprite/
      // ------------------------------------------------------ //
      function injectSvgSprite(path) {
      
          var ajax = new XMLHttpRequest();
          ajax.open("GET", path, true);
          ajax.send();
          ajax.onload = function(e) {
          var div = document.createElement("div");
          div.className = 'd-none';
          div.innerHTML = ajax.responseText;
          document.body.insertBefore(div, document.body.childNodes[0]);
          }
      }
      // this is set to BootstrapTemple website as you cannot 
      // inject local SVG sprite (using only 'icons/orion-svg-sprite.svg' path)
      // while using file:// protocol
      // pls don't forget to change to your domain :)
      injectSvgSprite('https://bootstraptemple.com/files/icons/orion-svg-sprite.svg');

      /*当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。*/
      document.addEventListener("DOMContentLoaded", function () {
        /*echars.js 开始*/
        //订单数据
        var dayOrdersDom = document.getElementById("echars-day-orders");
        var dayOrdersChar = echarts.init(dayOrdersDom);
        var dayOrdersOption;
        dayOrdersOption = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['支付完成']
          },
          /*toolbox: {
          show : true,
          feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
          }
        },*/
          calculable: true,
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ["12-17", "12-18", "12-19", "12-20", "12-21", "12-22", "12-23"]
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '成交',
              type: 'line',
              smooth: true,
              itemStyle: {normal: {areaStyle: {type: 'default'}}},
              data: [145, 130, 140, 131, 211, 130, 110]
            }
          ]
        }

        dayOrdersChar.setOption(dayOrdersOption);

        //注册用户信息
        var usersDom = document.getElementById("echars-users");
        var usersChar = echarts.init(usersDom, 'red');
        var usersOption;
        usersOption = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['用户注册量']
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ["6月", "7月", "8月", "9月", "10月", "11月", "12月"]
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '注册量',
              type: 'line',
              smooth: false,
              data: [1200, 1290, 1400, 1500, 1679, 1767, 1678]
            }
          ]
        }

        usersChar.setOption(usersOption);

        //图书销售比
        var salaryBooksCharDom = document.getElementById('echars-books');
        var salaryBooksChar = echarts.init(salaryBooksCharDom);
        var salaryBooksOption;

        salaryBooksOption = {
          title: {
            //text: 'Referer of a Website',
            //subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'horizontal',
            left: 'left'
          },
          series: [
            {
              name: 'Data',
              type: 'pie',
              radius: '70%',
              data: [
                {value: 1048, name: 'Java'},
                {value: 735, name: 'Python'},
                {value: 580, name: 'C/C++'},
                {value: 484, name: '前端'},
                {value: 300, name: 'Spring'},
                {value: 300, name: 'JavaWeb'}
              ],

              label: {
                formatter: '{d}%  '
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        salaryBooksChar.setOption(salaryBooksOption);


        //图书收藏比
        let collectBooksDom=document.getElementById("echars-collectBooks");
        let collectBooksChar=echarts.init(collectBooksDom);
        let collectBooksOption;
        collectBooksOption={
          tooltip: {
            trigger: 'item'
          },
          legend: {
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              tooltip:{
                formatter: '{d}%'
              },
              label: {
                show: true,
                formatter: '{b} {d}%'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: true
              },
              data: [
                { value: 1048, name: 'Java' },
                { value: 735, name: 'Python' },
                { value: 580, name: 'C/C++' },
                { value: 484, name: '前端' },
                { value: 300, name: 'Spring' },
                { value: 300, name: 'JavaWeb' }
              ]
            }
          ]
        };

        collectBooksChar.setOption(collectBooksOption);

      });
      /*echars.js结束*/
    </script>
    <!-- FontAwesome CSS - loading as last, so it doesn't block rendering-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  </body>
</html>